<template>
  <div id="box">
    <div class="health">健康信息上报</div>
    <div class="information">
      <div class="first">
        <div class="name">
          <span>姓名</span>
          <div>{{this.name}}</div>
        </div>
        <div class="class">
          <span>班级</span>
          <div>{{this.class}}</div>
        </div>
      </div>
      <div class="second">
        <div class="birthplace">
          <span>生源地</span>
          <div>{{address}}</div>
        </div>
      </div>
      <div class="content">
        <div class="left">
          <div>当前体温:</div>
          <div>是否发热、咳嗽:</div>
          <div>是否有去就诊:</div>
          <div>是否去过高危地区:</div>
          <div>是否接触过疑似病例人员:</div>
          <div>是否接触过咳嗽、发热人员:</div>
          <div>是否离开过学校:</div>
          <div>是否做过核酸检测:</div>
          <div>剩余口罩数量是否充足:</div>
          <div>口罩剩余数量:</div>
          <div>消杀用品是否充足:</div>
        </div>
        <div class="right">
          <div>
            <el-input-number
              v-model="num"
              @change="handleChange"
              :precision="1"
              :step="0.1"
              :min="35"
              :max="50"
              label="描述文字"
            ></el-input-number>
          </div>
          <div>
            <el-radio v-model="radio" label="1">是</el-radio>
            <el-radio v-model="radio" label="0">否</el-radio>
          </div>
          <div>
            <el-radio v-model="radio1" label="1">是</el-radio>
            <el-radio v-model="radio1" label="0">否</el-radio>
          </div>
          <div>
            <el-radio v-model="radio2" label="1">是</el-radio>
            <el-radio v-model="radio2" label="0">否</el-radio>
          </div>
          <div>
            <el-radio v-model="radio3" label="1">是</el-radio>
            <el-radio v-model="radio3" label="0">否</el-radio>
          </div>
          <div>
            <el-radio v-model="radio4" label="1">是</el-radio>
            <el-radio v-model="radio4" label="0">否</el-radio>
          </div>
          <div>
            <el-radio v-model="radio5" label="1">是</el-radio>
            <el-radio v-model="radio5" label="0">否</el-radio>
          </div>
          <div>
            <el-radio v-model="radio6" label="1">是</el-radio>
            <el-radio v-model="radio6" label="0">否</el-radio>
          </div>
          <div>
            <el-radio v-model="radio7" label="1">是</el-radio>
            <el-radio v-model="radio7" label="0">否</el-radio>
          </div>
          <div>
            <el-input-number
              v-model="num1"
              @change="handleChange"
              :min="0"
              :max="1000"
              label="描述文字"
            ></el-input-number>
          </div>
          <div>
            <el-radio v-model="radio8" label="1">是</el-radio>
            <el-radio v-model="radio8" label="0">否</el-radio>
          </div>
        </div>
      </div>
      <div class="footer">
        <el-button type="primary" @click="open()" :disabled="this.is_true">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      is_true:false,
      name:"",
      address:"",
      class:"",
      num: 1,
      radio: "1",
      radio1: "1",
      radio2: "1",
      radio3: "1",
      radio4: "1",
      radio5: "1",
      radio6: "1",
      radio7: "1",
      radio8: "1",
      num1: "1",
    };
  },

  created: function () {
    this.getIndex();
    this.getbutton()
  },
  methods: {
    getbutton(){
      this.$api({
        url: "/index/health_todaynote",
        method: "post",
        data: { count: window.localStorage.getItem("username") },
        success: (data) => {
          console.log(data)
          if(data != "0"){
            this.is_true=true
          }
        },
      });
    },

    getIndex() {
      this.$api({
        url: "/index/info",
        method: "post",
        data: { count: window.localStorage.getItem("username") },
        success: (data) => {
          console.log(data[0]);
          this.name=data[0].name
           this.address=data[0].address
            this.class=data[0].class
        },
      });
    },
    open(){
      let tmp={
        count:window.localStorage.getItem("username"),
        tiwen:this.num,
        is_illness:this.radio,
        is_hospital:this.radio1,
        is_go:this.radio2,
        is_contact1:this.radio3,
        is_contact2:this.radio4,
        is_leave:this.radio5,
        is_check:this.radio6,
        is_engry:this.radio7,
        num:this.num1,
        is_engry2:this.radio8,
      }
      console.log(tmp)
       this.$api({
        url: "/index/health_data",
        method: "post",
        data: tmp,
        success: (data) => {
          console.log(data)
          alert(data)
        },
      });
    },
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>


<style lang="scss" scoped>
#box {
  border: 2px solid #ccc;
  .health {
    font-weight: bold;
    height: 50px;
    line-height: 50px;
    color: black;
    border-bottom: 2px solid #ccc;
    margin-bottom: 10px;
    text-align: center;
  }
  .information {
    margin: 0 50px;
    .first {
      border: 1px solid #ccc;
      display: flex;
      align-items: center;
      height: 50px;
      line-height: 50px;
      .name {
        flex: 1;
        span {
          width: 100px;
          display: inline-block;
          padding: 10px 50px;
        }
        div {
          display: inline-block;
          padding-left: 10px;
          border-left: 1px solid #ccc;
        }
      }
      .class {
        flex: 1;
        span {
          width: 100px;
          display: inline-block;
          padding: 0 50px;
          border-left: 1px solid #ccc;
        }
        div {
          display: inline-block;
          padding-left: 10px;
          border-left: 1px solid #ccc;
        }
      }
    }
    .second {
      border: 1px solid #ccc;
      display: flex;
      align-items: center;
      height: 50px;
      line-height: 50px;
      .birthplace {
        flex: 1;
        span {
          width: 100px;
          display: inline-block;
          padding: 10px 50px;
        }
        div {
          display: inline-block;
          padding-left: 10px;
          border-left: 1px solid #ccc;
        }
      }
    }
    .content {
      margin-top: 20px;
      .left {
        display: inline-block;
        margin-right: 20px;
        text-align: right;
        div {
          margin-bottom: 10px;
          height: 40px;
          line-height: 40px;
        }
      }
      .right {
        display: inline-block;
        div {
          margin-bottom: 10px;
          height: 40px;
          line-height: 40px;
        }
      }
    }
    .footer {
      padding-left: 200px;
      padding-bottom: 10px;
    }
  }
}
</style>
